<script setup>
import { ref, computed, onMounted } from 'vue';
import dayjs from 'dayjs';
import SchedulerCard from "@/views/interviewScheduler/components/SchedulerCard.vue";
import HeaderBar from "@/components/HeaderBar.vue";
import 'dayjs/locale/zh-cn';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {updateInterview} from "@/views/interviewScheduler/components/share.js";

// 当前选中日期
const currentDate = ref(dayjs());
const filterType = ref('all');
const isLoading = ref(false);

onMounted(async ()=>{
  isLoading.value = true
  interviewSchedules.value = await updateInterview()
  isLoading.value = false
})

//转换成中文
const typeName = computed(() => {
  return {
    all: '全部',
    before: '之前',
    today: '今天',
    after: '之后'
  }[filterType.value];
})

// 示例面试安排数据
const interviewSchedules = ref([]);

// 根据选中日期和过滤类型过滤安排
const filteredSchedules = computed(() => {
  console.log(currentDate.value)
  return interviewSchedules.value.filter(schedule => {
    const scheduleDate = dayjs(schedule.date);
    if (filterType.value === 'before') {
      return scheduleDate.isBefore(currentDate.value, 'day');
    } else if (filterType.value === 'after') {
      return scheduleDate.isAfter(currentDate.value, 'day');
    } else if (filterType.value === 'today') {
      return scheduleDate.isSame(currentDate.value, 'day');
    }
    return true; // 'all' 显示全部
  });
});

// 处理日期选择事件
const onSelectDate = (date) => {
  currentDate.value = date;
};

const value = ref();
const getListData = (current) => {
  // 获取当前日期的字符串格式
  const currentDateString = current.format('YYYY-MM-DD');

  // 查找匹配当前日期的面试安排
  const daySchedules = interviewSchedules.value?.filter(schedule =>
      schedule.date === currentDateString);

  // 返回格式化后的日历事件数组
  return daySchedules.map(schedule => ({
    type: 'success', // 标记类型，可自定义样式，如 'warning'、'error'
    content: `${schedule.companyInfo?.companyName} (${schedule.date})`
  }));
};

const getMonthData = value => {
  if (value.month() === 8) {
    return 1394;
  }
};

dayjs.locale('zh-cn');
</script>

<template>
  <div class="interview-scheduler"
       v-loading.fullscreen.lock="isLoading"
       element-loading-text="正在加载..."
       element-loading-background="transparent">
    <div class="left-calendar">
      <a-calendar v-model:value="value" :locale="locale" class="calendar" @select="onSelectDate">
        <template #dateCellRender="{ current }">
          <ul class="events">
            <li v-for="item in getListData(current)" :key="item.content">
              <a-badge :text="item.content" />
            </li>
          </ul>
        </template>
        <template #monthCellRender="{ current }">
          <div v-if="getMonthData(current)" class="notes-month">
            <section>{{ getMonthData(current) }}</section>
          </div>
        </template>
      </a-calendar>
    </div>
    <a-layout class="right-schedule">
      <a-layout-header class="right-header">
        <a-radio-group v-model:value="filterType" class="date-status" size="large" button-style="solid">
          <a-radio-button value="all">全部</a-radio-button>
          <a-radio-button value="before">之前</a-radio-button>
          <a-radio-button value="today">今天</a-radio-button>
          <a-radio-button value="after">之后</a-radio-button>
        </a-radio-group>
      </a-layout-header>
      <a-layout-content class="right-content">
        <h2>{{ filterType !== 'all' ? currentDate.format('YYYY-MM-DD') : '' }}{{ typeName }} 的面试安排</h2>
        <a-list v-if="filteredSchedules.length"
                :data-source="filteredSchedules" :grid="{ gutter: 16, column:
                 1 }" class="inter-list">
          <template #renderItem="{ item }">
            <a-list-item>
              <SchedulerCard :info="item" />
            </a-list-item>
          </template>
        </a-list>
        <a-empty v-else description="暂无安排" />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<style scoped>
.interview-scheduler {
  display: flex;
  gap: 20px;
  height: calc(100% - 50px);
}

.left-calendar {
  flex: 1.25;
  border-right: 1px solid #e0e0e0;
}

.calendar {
  margin-top: 20px;
  height: 100%;
  overflow: scroll;
}

.right-schedule {
  flex: 1;
  padding-left: 20px;
  background-color: white;
}

.right-header {
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
}

.right-content {
  margin-top: 20px;
}

h2 {
  margin-bottom: 16px;
}

.events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}

.notes-month {
  text-align: center;
  font-size: 28px;
}

.notes-month section {
  font-size: 28px;
}

.events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}

.notes-month {
  text-align: center;
  font-size: 28px;
}

.notes-month section {
  font-size: 28px;
}

.date-status {
  height: 60px;
  transform: translateX(-10px);

  >a-radio-button {
    height: 60px
  }
}

.inter-list {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 700px;
}
</style>
